<template>
  <div>
    <h1>Parent:{{sum}}</h1>
    <button @click="add">父组件操作子组件的数据</button>
    <!-- 
      $parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等(不建议使用,如果有对个父组件,则没有反应)
     -->
    <Child1 />
    <Child2 />
  </div>
</template>

<script>
import Child1 from "./Child1";
import Child2 from "./Child2";
export default {
  name: "Parent",
  components: {
    Child1,
    Child2,
  },
  data() {
    return {
      sum: 100
    }
  },
  
  /*
    $children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等(不建议使用,因为$children拿到的子组件顺序不确定)
  */
 methods: {
  add(){
    this.$children.forEach((vc) => {
      vc.num++
    })
  }
 },
 
};

/* vc.__proto__==>vueComponent.prototype
vueComponent.prototype.__proto__ = Vue.prototype
Vue.prototype.__proto__ = Object.prototype */
</script>

<style></style>
